
<!--Created by levy on 16/5/1.
--><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>元素之旅</title>
    <style>body {margin-bottom: 5em;}</style>
  </head>
  <body>
    <article>
      <hgroup>
        <h1>h1</h1>
        <h2>h2</h2>
      </hgroup>
      <section>
        <p>as you can see<a href="#fig">Figure</a></p><code>figure</code>
        <figure id="fig">
          <figcaption>figure 不起效？</figcaption><img alt="figure img" src="test">
        </figure>
      </section>
      <section><code>mark</code>
        <p>用于突显内容，一般用于搜索。应该使用
          <mark>js,</mark>或
          <mark>服务端代码</mark>添加 mark 元素
        </p>
      </section>
      <section><code>progress</code>
        <h1>your task/score is in progress/meter</h1>
        <div>
          <progress min="0" max="100" value="50"></progress><span>50%</span>
        </div>
        <div><code>meter</code>
          <meter min="0" max="100" low="60" high="90" value="50" optimum="100"></meter>
        </div>
      </section>
      <section><code>time</code>
        <p>尽管当前大多数浏览器都不支持time</p>
        <time datetime="2016-05-01">2016-05-01</time>
      </section>
      <section>
        <style scoped>
          <details>{ color: red}</details>
        </style><code>details</code>
        <details>
          <summary>summary</summary>
          <p>hello details</p>
        </details>
      </section>
      <section><code>async</code>
        <p>script async</p>
      </section>
      <section><code>datalist list</code>
        <p> 这个safari无法显示。。。</p>
        <input list="colors">
        <datalist id="colors">
          <option value="blue"></option>
          <option value="red"></option>
          <option value="white"></option>
        </datalist>
      </section>
    </article>
  </body>
</html>